import React from "react";
import "./Main.css";
import axios from "axios";
import { useState, useEffect } from "react";
const typeList=["视频分类","全部分类","开放平台","项目管理","开发者","猪齿鱼","海马汇"]
const productList=["全部产品","飞搭Feida","汉得协同制造软件","汉得智能合同管理软件","虹珊瑚(Corallium)","汉得运输管理软件","汉得智慧财务套件软件","汉得运输管理软件","汉得清分结算软件","海马汇HIPPIUS"]
export default function Main({data}) {
  const [num, setNum] = useState({});
  
  const[product,setProduct]=useState("")
  const[type,setType]=useState("")
  const[productActive,setProductActive]=useState(0)
  const[typeActive,setTypeActive]=useState(1)
  let a = (
    <div className="Main">
      
      <div className="Main-left">
      {productList.map((product,index)=>
         <span
         className={`${productActive === index ? "Product-active" : ""} Product`}
         key={index}
         onClick={() => {
           if (product == "全部产品") setProduct("");
           else setProduct(product);
           setProductActive(index);
         }}
       >
         {product}
       </span>
    )}
      </div>
      <div className="Main-right">
        <div className="Right-nav">
        {typeList.map((type,index)=>
         <span
         className={`${typeActive === index ? "Nav-item-active" : ""} `}
         key={index}
         onClick={() => {
           
           setTypeActive(index);
         }}
       >
         {type}
       </span>
    )}
        </div>
        <div className="Right-vedio">
         { data.map((item,index)=>{
            return(<div className="Vedio-item" key={index}>
            <div className="Item-img"><img src={item.cover}></img></div>
            <div className="Item-bottom">
              <div className="Bottom-title">{item.title}</div>
              <div className="Bottom-subtitle">
                {item.des}
              </div>
              <div className="Bottom-count">
                <span>{item.playCount}次播放</span>
                <span>{item.lessonCount}节</span>
              </div>
            </div>
          </div>)
         })}
            

          
        </div>
      </div>
    </div>
  );
  let b=(
    <div className="Main-search">
      <div className="Search-result">
        <span>共找到&nbsp;</span>
        <span className="Search-count">200</span>
        <span>&nbsp;个“</span>
        <span className="Search-key">2020</span>
        <span>”相关视频</span>
      </div>
      <div className="Result-item">
        <div className="Result-item-left">
          <div className="Item-img"></div>
          <div className="Bottom-count">1286次播放</div>
        </div>
        <div className="Result-item-right">
          <div className="Right-item-first">2020 前端技术的发展趋势</div>
          <div className="Right-item-second">
            <span>Hzero企业版</span>
            <span>赋能培训</span>
          </div>
          <div className="Right-item-third">
            HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
          </div>
        </div>
      </div>
      <div className="Result-item">
        <div className="Result-item-left">
          <div className="Item-img"></div>
          <div className="Bottom-count">1286次播放</div>
        </div>
        <div className="Result-item-right">
          <div className="Right-item-first">2020 前端技术的发展趋势</div>
          <div className="Right-item-second">
            <span>Hzero企业版</span>
            <span>赋能培训</span>
          </div>
          <div className="Right-item-third">
            HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
          </div>
        </div>
      </div>
      <div className="Result-item">
        <div className="Result-item-left">
          <div className="Item-img"></div>
          <div className="Bottom-count">1286次播放</div>
        </div>
        <div className="Result-item-right">
          <div className="Right-item-first">2020 前端技术的发展趋势</div>
          <div className="Right-item-second">
            <span>Hzero企业版</span>
            <span>赋能培训</span>
          </div>
          <div className="Right-item-third">
            HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
          </div>
        </div>
      </div>
      <div className="Result-item">
        <div className="Result-item-left">
          <div className="Item-img"></div>
          <div className="Bottom-count">1286次播放</div>
        </div>
        <div className="Result-item-right">
          <div className="Right-item-first">2020 前端技术的发展趋势</div>
          <div className="Right-item-second">
            <span>Hzero企业版</span>
            <span>赋能培训</span>
          </div>
          <div className="Right-item-third">
            HZERO技术中台，结合了汉得多年的项目实施经验，抽象、封装的大量的标准服务及功能，以帮助企业产品研发、项目实施更加高效便捷，避免大量重复造轮子所带来的成本浪费。平台主要包含业务中台、数据中台和技术中台，目标是搭建一个可支持各种产品快速组建、开发的融合平台。
          </div>
        </div>
      </div>
    </div>
  );
  return a;
}
